import React, { Component } from 'react';
import { connect } from 'dva';
import styles from './ListContent.less';
import Link from 'umi/link';
import { Drawer, Modal } from 'antd';
import ContentPage from '@/components/ContentPage';
import { callbackify } from 'util';

@connect(({ headlines }) => ({
  news: headlines.news,
  reports: headlines.reports,
  zzds: headlines.zzds,
  videos: headlines.videos,
  detailInfo: headlines.detailInfo,
}))
class ListContent extends Component {
  state = {
    reportsTabSelected: 0,
    visible: false,
    current_id: '',
    conType: 'exclusive_headline',
  };

  componentDidMount() {
    this.setState({ loading: false });
    const { dispatch } = this.props;
    dispatch({
      type: 'headlines/queryNews',
      payload: {
        page_size: 8,
        page_num: 1,
      },
    });

    dispatch({
      type: 'headlines/queryReports',
      payload: {
        page_size: 6,
        page_num: 1,
        type: 'cs',
      },
    });
    dispatch({
      type: 'headlines/queryZzds',
      payload: {
        page_size: 8,
        page_num: 1,
      },
    });
    dispatch({
      type: 'headlines/queryVideos',
      payload: {
        type: 23276,
        page_size: 1,
        page_num: 1,
      },
    });
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState({
      visible: false,
      detailInfo: {},
    });
  };

  render() {
    let that = this;
    let { dispatch, news, reports, zzds, videos, detailInfo } = this.props;
    // console.log("detailInfo===",detailInfo)

    let openDetail = (id, type) => {
      console.log('id', id);

      dispatch({
        type: 'headlines/getDetailInfo',
        payload: {
          id: id,
          api_type: type,
        },
      }).then(res => {
        this.setState({
          visible: true,
        });
      });

      // this.showDrawer();
    };

    let generateNewsList = () => {
      let res = [];
      if (news && news.data_list) {
        for (let i = 0; i < news.data_list.length; i++) {
          res.push(
            <li key={'newslist-' + i}>
              <span className={i < 3 ? styles.topNewsNumbering : styles.normalNewsNumbering}>
                {i + 1}.
              </span>
              <a
                className={styles.articlesLink}
                onClick={openDetail.bind(this, news.data_list[i].id, 'exclusive_headline')}
                // href={news.data_list[i].detail_url}
                // target="_blank"
              >
                {news.data_list[i].title}
              </a>
            </li>
          );
        }
      }
      return res;
    };

    let generateZzdList = () => {
      let res = [];
      if (zzds && zzds.data_list) {
        for (let i = 0; i < zzds.data_list.length; i++) {
          res.push(
            <li key={'zzdlist-' + i}>
              <span className={styles.zzdDot}>•</span>
              <a
                className={styles.articlesLink}
                onClick={openDetail.bind(this, news.data_list[i].id, 'wealth_knows')}
              >
                {zzds.data_list[i].title}
              </a>
            </li>
          );
        }
      }
      return res;
    };

    let generateReportList = () => {
      let res = [];
      if (reports && reports.data_list) {
        for (let i = 0; i < reports.data_list.length; i++) {
          res.push(
            <li key={'zzdlist-' + i}>
              <span className={styles.zzdDot}>•</span>
              <a
                className={styles.articlesLink}
                onClick={openDetail.bind(this, news.data_list[i].id, 'industry_research')}
                // href={reports.data_list[i].show_url}
                // target="_blank"
              >
                {reports.data_list[i].title}
              </a>
            </li>
          );
        }
      }
      return res;
    };

    let switchReportSources = (source, tabSelected) => {
      const { dispatch } = that.props;
      that.setState({ reportsTabSelected: tabSelected });
      dispatch({
        type: 'headlines/queryReports',
        payload: {
          page_size: 6,
          page_num: 1,
          type: source,
          contentVisible: false,
        },
      });
    };

    return (
      <div className={styles.outerWidthLim}>
        <Modal
          // title="新闻详情"
          width={1000}
          visible={this.state.visible}
          footer={null}
          destroyOnClose={true}
          // onOk={this.handleOk}
          onCancel={this.onClose}
          style={{
            height: 'calc(90% - 10px)',
          }}
        >
          <ContentPage
            dispatch={dispatch}
            contentData={detailInfo}
            // contentID={this.state.current_id}
            // SourceType={this.state.conType}
          />
        </Modal>
        <div className={styles.contentCard}>
          <div className={styles.cardHeader}>
            <div className={styles.cardHeaderTitle}>视频新闻</div>
            <Link to={'/Headlines/MoreVideos'}>
              <div className={styles.moreButton}>更多</div>
            </Link>
          </div>
          <div className={styles.cardContent}>
            <video
              src={videos && videos.data_list ? videos.data_list[0].url_list[0] : ''}
              controls="controls"
              style={{ width: '100%', height: '100%', float: 'left' }}
            />
          </div>
        </div>
        <div className={styles.contentCard}>
          <div className={styles.cardHeader}>
            <div className={styles.cardHeaderTitle}>独家头条</div>
            <Link to={'/Headlines/NewsDetailList'}>
              <div className={styles.moreButton}>更多</div>
            </Link>
          </div>
          <div className={styles.cardContent}>
            <ul className={styles.noLeftPadding} id="news">
              {generateNewsList()}
            </ul>
          </div>
        </div>
        <div className={styles.contentCard}>
          <div className={styles.cardHeader}>
            <div className={styles.cardHeaderTitle}>行业研究</div>
            <Link to={'/Headlines/ReportsDetailList'}>
              <div className={styles.moreButton}>更多</div>
            </Link>
          </div>
          <div className={styles.cardContent}>
            <div className={styles.buttonTabContainer}>
              <a onClick={() => switchReportSources('cs', 0)}>
                <div
                  className={
                    (this.state.reportsTabSelected === 0 ? styles.buttonTabActive : '') +
                    ' ' +
                    styles.buttonTab
                  }
                >
                  券商研报
                </div>
              </a>
              <a onClick={() => switchReportSources('jjckb', 1)}>
                <div
                  className={
                    (this.state.reportsTabSelected === 1 ? styles.buttonTabActive : '') +
                    ' ' +
                    styles.buttonTab +
                    ' ' +
                    styles.smallMarginLeft
                  }
                >
                  经参产业政策
                </div>
              </a>
            </div>
            <ul className={styles.noLeftPadding} id="reports">
              {generateReportList()}
            </ul>
          </div>
        </div>
        <div className={styles.contentCard}>
          <div className={styles.cardHeader}>
            <div className={styles.cardHeaderTitle}>财富早知道</div>
            <Link to={'/Headlines/ZzdDetailList'}>
              <div className={styles.moreButton}>更多</div>
            </Link>
          </div>
          <div className={styles.cardContent}>
            <ul className={styles.noLeftPadding} id="news">
              {generateZzdList()}
            </ul>
          </div>
        </div>
      </div>
    );
  }
}

export default ListContent;
